/*
 * @Author: HZK
 * @Date: 2020-11-30 15:39:55
 * @LastEditTime: 2020-12-01 20:44:36
 * @LastEditors: hanfengmi
 * @Description: table页入口
 */

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table, Tag, Space } from 'antd';
import styles from './index.less';

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: '标签',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (
      <>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <a>删除</a>
      </Space>
    ),
  },
];

class ReactDemo extends React.Component{
  componentDidMount(){
    const {dispatch} = this.props;
    dispatch({
      type:"global/getList",
    })
  }

  render () {
    const { global:{list} } = this.props
    return (
      <div className={styles.wrapper}>
        <Table columns={columns} dataSource={list} />
      </div>
    )
  }
}
ReactDemo.propTypes = {
  num:PropTypes.number,
}
export default connect(({ global }) => ({
  global
}))(ReactDemo);
